/*
 * @Author: kanglang
 * @Date: 2020-12-09 14:25:51
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-03 11:42:36
 * @Description: 用户反馈--文字部分
 */
import React, { useState, useRef, useEffect } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { px2dp } from '@/styles';

const MAX_WORD_LEN = 500;

const WordBox = ({ onChangeText, blurBool }) => {
  const [defaultLen, setDefaultLen] = useState(MAX_WORD_LEN);
  const [wordValue, setWordValue] = useState('');
  const inputElement = useRef(null);
  const onChange = (text) => {
    onChangeText(text);
    setWordValue((text));
    setDefaultLen(MAX_WORD_LEN - text.length);
  };
  useEffect(() => {
    // if (blurBool) {
    //     inputElement.current.blur();
    // }
  });
  return (
    <View style={styles.container}>
      <View style={styles.tipBox}>
        <Text style={styles.leftTip}>意见或建议</Text>
        <Text style={styles.rightTip}>
          你还可以输入
          {' '}
          <Text>{defaultLen}</Text>
          {' '}
          字
        </Text>
      </View>
      <View style={styles.inputBox}>
        <TextInput
          style={styles.inputStyle}
          ref={inputElement}
          multiline
          numberOfLines={8}
          placeholder='请留下您的宝贵意见或建议'
          placeholderTextColor='#CDCCC9'
          maxLength={MAX_WORD_LEN}
          onChangeText={(text) => { onChange(text); }}
          value={wordValue}
        />
      </View>
    </View>
  );
};
export default WordBox;
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    paddingHorizontal: px2dp(32)
  },
  tipBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: px2dp(32),
  },
  leftTip: {
    fontSize: px2dp(32),
    color: '#343332',
  },

  inputStyle: {
    textAlignVertical: 'top',
    fontSize: px2dp(28),
    color: '#343332',
    height: px2dp(264),
    maxHeight: px2dp(264),
    paddingLeft: 0,
  }
});
